<template>
<div>
<p v-show="!show"> 未添加商品</p>
<ul v-show="show">
<li v-for="(item, index) in productList" :key="index" class="product clearfix">
<div class="product-left">
 <p><input type="checkBox" v-on:click="sum(index)"></p>
 <img src="./img/1.jpg"/>
</div>
<div class="product-right">
<p>vue+vuex+vue-router+mint-ui 开源demo（简单粗暴）欢迎学习与交流，最好点个赞</p>
<p><span class="price">￥{{item.unit}}</span><span class="amount">X{{item.num}}双></span></p>
<p><del>￥99999.99</del></p>
<b>鞋码:{{item.selected}}</b>
</div>
</li>
</ul>
<div class="total-price clearfix">
<span>订单总额：{{totalPrice}}.00</span>
<p>生成订单</p>
</div>
</div>
</template>

<script>
export default {

  data() {
    return {
      productList:[],
      show:false,
      totalPrice:0
    }
  },mounted() {
    if("commoditys" in localStorage){
      this.productList=JSON.parse(localStorage.commoditys)
      this.show=true
      
    }
      
  },methods: {
    sum(index){
      this.productList[index].checked=!this.productList[index].checked
      this.totalPrice=0
      this.productList.map((item)=>{
        if(item.checked===true){
          this.totalPrice+=item.unit
        }
      })
    }
  }
}
</script>

<style scoped>
.product{
  margin:10px;
}
.product-left{
  float:left;
  width:30%;
  text-align:left;
  padding:10px;
  box-sizing:border-box; 
}
.product-right{
  float:left;
  width:70%;
  padding:10px;
  text-align:left;
  box-sizing:border-box; 
}

.product-left img{
  width:80px;
  height:auto;
}
.price{
  color:red;
  font-size:20px;
}
.amount{
  float:right;
  color:#aaa;
  font-size:15px;

}
li{
  border:1px solid #999;
}
.total-price{
  width:100%;
  position:fixed;
  bottom:40px;
  font-size:20px;
  background:#fff;
}
.total-price p{
  float:right;
  background:red;
  color:#fff;
  padding:10px;
  
}
.total-price span{
padding:10px;
color:red;float:left;
}
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: "";
  display: block;
  height: 0;
  clear:both;
  visibility: hidden;
    }
    
</style>